import { View, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { Component } from 'react';
import { checkAuth } from '@/utils/authUtil';
import { getServiceDetail } from '@/service/apis/service';
import GoodsSwiper from '@/components/Swiper/index';
import phoneIcon from '@/assets/images/goods/phone.png';
import SkuModal from '@/components/SkuModal';
import RichText from '@/components/RichText';
import BottomBtns from '../components/BottomBtns';
import './index.scss';

export default class Index extends Component {
  state = {
    skuModalShow: false,
    skuInfo: {
      imageUrl: '',
      goodsName: '',
      price: 0,
      id: undefined,
      count: 1,
      number: 0,
    },
    skuList: [],
    goodsDetail: {},
  };
  componentDidMount() {
    const querys: any = Taro.getCurrentInstance().router?.params;
    if (querys?.id) {
      this.getGoodsDetail(querys.id);
    }
  }
  selectType: 'cart' | 'buy' | '' = '';
  addToCart = () => {
    this.selectType = 'cart';
    this.setState({
      skuModalShow: true,
    });
  };
  onBuy = () => {
    this.selectType = 'buy';
    this.setState({
      skuModalShow: true,
    });
  };
  getGoodsDetail = async (id: string) => {
    try {
      const { data } = await getServiceDetail({
        id,
      });
      if (data.detail) {
        const detail = data.detail;
        this.setState({
          goodsDetail: detail,
          skuInfo: {
            imageUrl: detail.pic_url,
            goodsName: detail.name,
            price: detail.counter_price,
            count: 1,
          },
        });
        if (detail.product && Array.isArray(detail.product)) {
          this.setState({
            skuList: detail.product.map((item) => {
              return {
                id: item.id,
                name: item.specifications,
                price: item.vip_price,
                number: item.number,
                imageUrl: item.url
              };
            }),
          });
          if (detail.product.length > 0) {
            console.log('detail.product', detail.product[0]);
            this.setState({
              skuInfo: {
                ...this.state.skuInfo,
                id: detail.product[0].id,
                price: detail.product[0].vip_price,
                number: detail.product[0].number,
                imageUrl: detail.product[0].url,
              },
            });
          }
        }
      } else {
        Taro.showToast({
          title: '服务详情数据错误',
          icon: 'none',
        });
      }
    } catch (err) {
      console.log('err: ', err);
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };
  onChangeSku = (sku) => {
    console.log('sku', sku);
    this.setState({
      skuInfo: {
        ...this.state.skuInfo,
        ...sku,
      },
    });
  };
  onSkuCountChange = (count: number) => {
    console.log('count', count);
    this.setState({
      skuInfo: {
        ...this.state.skuInfo,
        count,
      },
    });
  };
  onSkuSubmit = () => {
    const querys: any = Taro.getCurrentInstance().router?.params;
    const { skuInfo } = this.state;
    console.log('skuInfo: ', skuInfo);
    checkAuth(() => {
      Taro.navigateTo({
        url: `/subPages/order/submit/index?id=${querys.id}&skuId=${skuInfo.id}&count=${skuInfo.count}`,
      });
    });
  };

  callPhone = () => {
    Taro.makePhoneCall({
      phoneNumber: this.state.goodsDetail.cartoon_store_mobile,
    });
  };
  render() {
    const { goodsDetail, skuInfo, skuList, skuModalShow } = this.state;
    return (
      <View className="goods-container">
        <View>
          <GoodsSwiper imageList={goodsDetail.gallery} />
        </View>
        <View className="goods-info-content">
          <View className="goods-name section">
            <View className="good-price">
              <Text className="goods-price__red">
                <Text className="price-flag">￥</Text>
                {goodsDetail.min_price}
              </Text>
              <Text className="goods-price__gray">价格 </Text>
              <Text className="price-line">￥{goodsDetail.counter_price}</Text>
            </View>
            <View className="goods-title">{goodsDetail.name}</View>
          </View>
          {/* <View className="express-price section">
            <View>
              <Text>运费</Text>￥{goodsDetail.expressAmount}
            </View>
            <View>
              <Text>剩余</Text>
              {goodsDetail.count}
            </View>
          </View> */}
          <View className="shop-container section">
            <View className="shop-info">
              <Image src={goodsDetail.cartoon_store_store_logo} />
              <View className="shop-content">
                <View className="shop-content__name">{goodsDetail.cartoon_store_store_name}</View>
                <View className="shop-content__address">
                  {goodsDetail.cartoon_store_store_address}
                </View>
              </View>
            </View>
            <View className="shop-phone" onClick={this.callPhone}>
              <Image src={phoneIcon} />
              电话
            </View>
          </View>
          <View className="goods-info section">
            <View className="goods-info__title">— 商品详情 —</View>
            <View className="rech-text">
              {/* <RichText nodes={goodsDetail.cartoon_goods_detail} /> */}
              {goodsDetail.cartoon_goods_detail && (
                <RichText content={goodsDetail.cartoon_goods_detail || ''} />
              )}
            </View>
          </View>
        </View>
        <BottomBtns onAddCart={this.addToCart} noCart onBuy={this.onBuy} />
        <SkuModal
          show={skuModalShow}
          skuList={skuList}
          skuInfo={skuInfo}
          onChangeSku={this.onChangeSku}
          onCountChange={this.onSkuCountChange}
          onSubmit={this.onSkuSubmit}
        />
      </View>
    );
  }
}
